<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数组基本方法</title>
    <style>
      .hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <div>努力</div>
    <div>学习</div>
    <script>
      let arr = new Array(6); // 创建一个长度为6的空数组
      //   （注意：这是指一个有 6 个空位 (empty) 的数组，而不是由 6 个undefined组成的数组）。
      console.log(arr.length);
      console.log(arr.toString());
      console.log(String(arr));
      /*  join() 方法将一个数组（或一个类数组对象）
      的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。（默认用逗号分隔）
      如果数组只有一个元素，那么将返回该元素而不使用分隔符。 */
      console.log(arr.join("|"));

      console.log(arr[0]); // 打印数组索引为0的元素

      let hundou = [1, 2, 4];
      let hdr = hundou.join("|");
      console.log(location.href + "?id" + hdr);
      // location.href返回当前test8文件的绝对路径以params参数的方式拼接id为hdr且用|分隔的地址

      let arr1 = Array.of(6); // 创建一个具有单独元素6的数组
      console.log(arr1.length);
      console.log(arr1[0]);

      let str = "houdunren";
      console.log(Array.from(str));
      // Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
      // 想要转换成数组的伪数组对象或可迭代对象。
      // 伪数组对象（拥有一个 length 属性和若干索引属性的任意对象）
      // 可迭代对象（可以获取对象中的元素，如 Map 和 Set 等）
      // 具有 Symbol.iterator() 方法的数据结构称为可迭代对象。例如，数组、字符串、集合等。
      console.log(str.split("", 1)); // 第二个参数表示返回的数组元素的个数
      // split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。
      let obj = { 0: "woman", 1: 18, length: 2 };
      console.log(Array.from(obj));

      let divs = document.querySelectorAll("div");
      Array.from(divs, function (item) {
        console.log(item.innerHTML);
        console.log((item.style.backgroundColor = "red"));
      });

      let arr2 = ["薛仁贵", "李元霸", "樊梨花"]; // map 函数的方法
      let arr3 = ["李道宗", "李元吉", "舒宝同"];
      let arr4 = [...arr3, ...arr2]; // 扩展运算符
      console.log(arr4);

      for (const value of arr3) {
        arr2.push(value);
      }
      // for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）
      // typed array：类型化数组
      // 上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句
      console.log(arr2);

      [...divs].map(function (item) {
        item.addEventListener("click", function () {
          this.classList.toggle("hide");
          // Element.classList 是一个只读属性，返回一个元素 class 属性的动态 DOMTokenList 集合。这可以用于操作 class 集合。
          // Element.classList 返回该元素包含的 class 属性
        });
      });

      // 解构赋值，把值批量赋值给变量
      const [year, name] = ["2010", "Houdunren"];
      console.log(name);

      let str1 = "java";
      console.log([...str1]);

      function show([name, year]) {
        console.log(name, year);
      }
      show(["后盾", 1020]);

      function show1(args) {
        console.log(args);
      }
      show1(["age", "woman"]);

      console.log("++++++++++数组添加元素++++++++++++++++++");
      let array = ["张杰", "周杰伦", "林俊杰"];
      array[array.length] = "Jason"; // 添加元素
      array[array.length] = "jay";
      console.log(array);
      array.push("JJ");
      console.log(array);
      let array1 = ["黄家驹", "F4"];

      let length = array.push("live", ...array1);
      // push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
      console.log(length);
      console.log(array);

      function rangeArray(begin, end) {
        let array = [];
        for (let i = begin; i <= end; i++) {
          array.push(i);
        }
        return array;
      }
      console.table(rangeArray(1, 10));

      let arraychan = ["南极仙翁", "广成子", "赤精子", "惧留孙"];
      let vars = arraychan.unshift("赤脚大仙");
      // 从后面移出pop(),返回移出的值   从前面移出shift()移出返回值
      //  添加数组从前添加unshift() 从后添加push()返回数组长度

      console.log(arraychan);
      let sum1 = arraychan.pop();
      console.log(sum1); // 返回数组的长度
      console.log(arraychan.push("太乙真人"));

      let arrar5 = Array(5).fill("鸿钧老祖");
      // fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
      console.log(arrar5);
      // fill参数
      // value：用来填充数组元素的值。
      // start（可选） 起始索引，默认值为 0。
      // end（可选） 终止索引，默认值为 arr.length。
      console.log([1, 2, 4, 5].fill("max", 1, 3));
    </script>
  </body>
</html>
